// 状态管理有5个核心：state、getter、mutation、action、module。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state:{
		'username':'foo',
		'age':18,
		num: 10,
		todos:[
			{
				id:1,
				text:'与天奋斗，其乐无穷',
				done: false
			},
			{
				id:2,
				text:'与地奋斗，其乐无穷',
				done: true
			}
		]
	},
	// eg: 可以认为是 store 的计算属性，对 state 的加工，是派生出来的数据。
	getters:{
		doneTodos: state=>{
			return state.todos.filter(todo=>todo.done)
		},
		allTodos: state=>{
			return state.todos
		},
		doneTodosCount: (state, getters) => {
			//state ：可以访问数据
			//getters：访问其他函数，等同于 store.getters
			return getters.doneTodos.length
		},
		getTodoById: (state)=>(id)=>{
			return state.todos.find(todo=>todo.id==id)
		}
	},
	// eg: Vuex中store数据改变的唯一方法就是mutation
	mutations: {
		// add(state){
		// 	state.num += 2 
		// },
		// add(state,n){
		// 	state.num += n
		// },
		add(state,payload){
			state.num += payload.amount
		}
	},
	// eg: action 类似于 mutation ，不同在于：
	// 1 action 提交的是 mutation，通过 mutation 来改变 state ，而不是直接变更状态。
	// 2 action 可以包含任意异步操作。
	actions:{
		// addCountAction(context){
		// 	context.commit('add')
		// },
		//参数解构
		// addCountAction ({commit}) {
		// 	commit('add')
		// },
		addCountAction(context,payload){
			// context.commit('add',payload)
			setTimeout(function(){
				context.commit('add',payload)
			},1000)
		},
		actionA({commit}){
			return new Promise((resolve,reject)=>{
				setTimeout(()=>{
					commit('someMutation')
					resolve()
				},1000)
			})
		},
		actionB ({ dispatch, commit }) {
			return dispatch('actionA').then(() => {
				commit('someOtherMutation')
			})
		}
		
		  // store.dispatch('actionA').then(() => {
		  //       // ...
		  //   })
		  
		// 假设 getData() 和 getOtherData() 返回的是 Promise
		/* actions: {
			  async actionA ({ commit }) {
				  commit('gotData', await getData())
			  },
			  async actionB ({ dispatch, commit }) {
				  await dispatch('actionA') // 等待 actionA 完成
				  commit('gotOtherData', await getOtherData())
			  }
		  } 
	    */
		
	}
})

export default store

// eg: 来看一个更加实际的购物车示例，涉及到调用异步 API 和分发多重 mutation：,
//  actions: {
//         checkout ({ commit, state }, products) {
//             // 把当前购物车的物品备份起来
//             const savedCartItems = [...state.cart.added]
//             // 发出结账请求，然后乐观地清空购物车
//             commit(types.CHECKOUT_REQUEST)
//             // 购物 API 接受一个成功回调和一个失败回调
//             shop.buyProducts(
//                 products,
//                 // 成功操作
//                 () => commit(types.CHECKOUT_SUCCESS),
//                 // 失败操作
//                 () => commit(types.CHECKOUT_FAILURE, savedCartItems)
//             )
//         }
//     }
// 注意我们正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的状态变更。



